<!--
 * @Description:大屏模版1
 * @Author: gaoyunpeng
 * @Date: 2022-01-22 19:47:24
 * @LastEditors: gaoyunpeng
-->
<template>
  <div class="template-content">
    <!-- 大屏左边布局 -->
    <div class="screen-left">
      <dv-border-box-8 style="height: 50%; padding: 3px">
        <!-- 标题 -->
        <Title1 titleName="标题"></Title1>
        <!-- 图表展示 -->
        <div class="echart">
          <!-- 折线图 -->
          <mLine
            elementId="myLine"
            :xAxisData="barX"
            :legendName="barName"
            :seriesData="list1"
            :titleText="title"
          ></mLine>
        </div>
      </dv-border-box-8>
      <dv-border-box-8 style="height: 50%; padding: 3px">
        <Title1 titleName="标题"></Title1>
        <div class="echart">
          <Seamless></Seamless>
        </div>
      </dv-border-box-8>
    </div>
    <!-- 大屏中间布局 -->
    <div class="screen-middle">
      <dv-border-box-8 style="height: 60%; padding: 5px">
        <Map></Map>
      </dv-border-box-8>
      <dv-border-box-8 style="height: 40%; padding: 4px">
        <Title1 titleName="标题" :height="20"></Title1>
        <div class="echart">
          <!-- 柱状图 -->
          <mLine
            :colorList="['#8bd46e', '#f5804d']"
            elementId="sssss"
            :xAxisData="barX"
            :legendName="barName"
            :seriesData="list2"
            :titleText="title"
          ></mLine>
        </div>
      </dv-border-box-8>
    </div>
    <!-- 大屏右边布局 -->
    <div class="screen-right">
      <dv-border-box-8 style="height: 50%; padding: 4px">
        <Title1 titleName="标题"></Title1>
        <div class="echart">
          <!-- 饼状图 -->
          <mLine
            elementId="aaa"
            :xAxisData="barX"
            :legendName="pieName"
            :seriesData="list3"
            :titleText="title"
            :showX="false"
            tooltipType="item"
          ></mLine>
        </div>
      </dv-border-box-8>
      <dv-border-box-8 style="height: 50%; padding: 4px">
        <Title1 titleName="标题"></Title1>
        <div class="echart">
          <BannerTable
            height="calc(100% + 4px)"
            :headerList="['序号', '项目名称', '经费']"
            :data="data"
          ></BannerTable>
        </div>
      </dv-border-box-8>
    </div>
  </div>
</template>

<script>
// 引入的json模拟数据
import tableData from '@/components/bannerTable/banner-table.json'
// 引入的组件
import Title1 from '@/components/title/title1.vue' // 标题组件
import mLine from '@/components/echart/index.vue' // echart组件
import Map from '@/components/map/index.vue' // 地图组件
import Seamless from '@/components/seamless/index.vue' // 无缝滚动组件
import BannerTable from '@/components/bannerTable/index.vue'
export default {
  components: {
    Title1,
    mLine,
    Map,
    Seamless,
    BannerTable
  },
  data() {
    return {
      data: [],
      title: '图表统计',
      barName: ['文档数', '任务数'],
      barX: [
        '2019/03/01',
        '2019/03/02',
        '2019/03/03',
        '2019/03/04',
        '2019/03/05',
        '2019/03/06',
        '2019/03/07'
      ],
      // 折线图数据结构
      list1: [
        {
          type: 'line',
          name: '文档数',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          type: 'line',
          name: '任务数',
          data: [220, 182, 191, 234, 290, 330, 310]
        }
      ],
      // 柱状图数据结构
      list2: [
        {
          type: 'bar',
          name: '文档数',
          data: [120, 132, 101, 134, 90, 230, 210],
          itemStyle: {
            barBorderRadius: [15, 15, 15, 15]
          }
        },
        {
          type: 'bar',
          name: '任务数',
          data: [220, 182, 191, 234, 290, 330, 310],
          itemStyle: {
            barBorderRadius: [15, 15, 15, 15]
          }
        }
      ],
      // 饼状图数据结构
      list3: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ]
        }
      ],
      pieName: ['Search Engine', 'Direct', 'Email', 'Union Ads', 'Video Ads']
    }
  },
  methods: {
    getData() {
      this.data = tableData.map((item) => {
        return {
          id: item.id,
          proName: item.proName,
          money: item.money
        }
      })
    }
  },
  created() {
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
.template-content {
  display: flex;
  width: 100%;
  height: 100%;
  .screen-left {
    display: flex;
    flex-direction: column;
    width: 450px;
    .echart {
      width: 100%;
      height: calc(100% - 35px);
    }
  }
  .screen-middle {
    flex: 1;
    margin: 0 5px;
    flex-direction: column;
    .echart {
      width: 100%;
      height: calc(100% - 25px);
    }
  }
  .screen-right {
    display: flex;
    flex-direction: column;
    width: 450px;
    .echart {
      width: 100%;
      height: calc(100% - 35px);
    }
  }
}
</style>
